<template>
	<view class="" style="position: relative;">
		<view class="top">
			<view v-if="statusa == 0" class="wanc">
				订单待支付
			</view>
			<view v-if="statusa == 1" class="wanc">
				订单已支付
			</view>
			<view v-if="statusa == 2" class="wanc">
				订单待确认
			</view>
			<view v-if="statusa == 3" class="wanc">
				骑手接单
			</view>
			<view v-if="statusa == 4" class="wanc">
				订单已发货
			</view>
			<view v-if="statusa == 5" class="wanc">
				订单已收货
			</view>
			
			<view class="bom">
				<view class="b-left" @click="backqian" v-if="statusa !=0">
					<view class="">
						<u-icon name="rmb-circle-fill" color="#000" size="28"></u-icon>
					</view>
					<view class="">
						退款
					</view>
				</view>
				<view v-if="zhezhao == true" class="zhe" style="width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, .5);position: absolute;z-index: 999;top: 0;left: 0;">
					<view class="zhao" style="width: 600rpx;background-color: #fff;margin: 50rpx auto;">
						<view class="" style="padding: 20rpx;font-size: 35rpx;font-weight: 900;display: flex;align-items: center;justify-content: space-between;">
							退款理由
							<input v-model="liyou" style="width: 400rpx;" type="text" placeholder="请输入理由" />
							
						</view>
						<view class="" style="padding: 20rpx;font-size: 35rpx;font-weight: 900;display: flex;align-items: center;justify-content: space-between;">
							请上传图片
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="4"
								:previewFullImage="true" style="background-color: gray;" border></u-upload>
						</view>
						
						<view class="" style="display: flex;justify-content: space-around;margin-top: 50rpx;">
							<view class="">
								<button @click="noMoney">
									取消
								</button>
							</view>
							
							<view class="">
								<button @click="yesMoney">
									确定
								</button>
							</view>
							
						</view>
						
					</view>
				</view>
				<view class="b-body" v-if="statusa !=0">
					<view class="" @click="Pingjia">
						<view class="">
							<u-icon name="edit-pen" color="#000" size="28"></u-icon>
						</view>
						<view class="">
							评价
						</view>
					</view>
					
					<view class="zhePl" v-if="showPl == true">
						<view class="zhaoPl" style="width: 600rpx;margin: 100rpx auto;background-color: #fff;">
							<view class="" style="padding: 20rpx;font-size: 35rpx;font-weight: 900;display: flex;align-items: center;justify-content: space-between;">
								请输入评论
								<input type="text" v-model="plRome" style="width: 260rpx;" placeholder="请输入评论" />
							</view>
							<view class="" style="padding: 20rpx;font-size: 35rpx;font-weight: 900;display: flex;align-items: center;justify-content: space-between;">
								请上传图片
								<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="4"
									:previewFullImage="true" style="background-color: gray;" border></u-upload>
							</view>
							
							<view class="" style="margin-top: 30rpx;margin-left: 30rpx;">
								<u-rate :count="count" v-model="value"></u-rate>
							</view>
							
							<view class="" style="display: flex;justify-content: space-around;margin-top: 50rpx;">
								<view class="">
									<button @click="noPl">
										取消
									</button>
								</view>
								
								<view class="">
									<button @click="yesPl">
										确定
									</button>
								</view>
								
							</view>
						</view>
					</view>
					
				</view>
				<view class="b-right" v-if="statusa !=0" @click="callPhone">
					<view class="" style="margin-left: 20rpx;">
						<u-icon name="phone" color="#000" size="28"></u-icon>
					</view>
					<view class="">
						联系商家
					</view>
				</view>
				<view @click="buyMoney" v-if="statusa ==0" class="" style="width: 200rpx;height: 80rpx;background-color: #ccc;text-align: center;line-height: 80rpx;">
					支付
				</view>
				
			</view>
			
		</view>
		
		<!-- 商品部分 -->
		
		<view class="bbody">
			<view class="b-top">
				{{storeName}}
				
				<view class="" style="width: 50rpx;">
					
				</view>
				<u-icon name="arrow-right" color="#000" size="24"></u-icon>
			</view>
			<view class="">
				
				
				<view class="shops" v-for="(item,index) in orderDetails.goods" :key="index">
					<view class="shop_left">
						<image style="width: 130rpx;height: 130rpx;" :src="item.detail.images" mode=""></image>
					</view>
					<view class="shop_main">
						<view class="titles">
							{{item.title}}
						</view>
						<view class="">
							x{{item.number}}
						</view>
					</view>
					<view class="shop_right">
						￥{{item.price}}
					</view>
				</view>
				
			</view>
			<view class="shifu">
				实付: ￥{{pay_price}}
			</view>
			
			
		</view>
		
		
		<!-- footer -->
		<view class="footer">
			<view class="neirong">
				<view class="" style="width: 200rpx;color: #ccc;">
					收货信息:
				</view>
				<view class="" style="padding-left: 30rpx;">
					{{address}}
				</view>
			</view>
			<view class="neirong">
				<view class="" style="width: 160rpx;color: #ccc;">
					收货人:
				</view>
				<view class="" style="">
					{{name}} {{phone}}
				</view>
			</view>
			<view class="neirong">
				<view class="" style="width: 160rpx;color: #ccc;">
					下单时间:
				</view>
				<view class="">
					{{update_time}}
				</view>
			</view>
			<view class="neirong">
				<view class="" style="width: 160rpx;color: #ccc;">
					订单号码:
				</view>
				<view class="">
					{{order_no}}
				</view>
			</view>
		</view>
		
		
	</view>
	
</template>

<script>
	export default {
		data(){
			return {
				orderIds:'',
				orderDetails:[],
				pay_price:'',
				address:'',
				name:'',
				phone:'',
				update_time:'',
				order_no:'',
				storeName:'',
				fileList1: [],
				image:[],
				images:'',
				zhezhao:false,
				liyou:'',
				statusa:'',
				cartsShop:[],
				storePhone:'',
				showPl:false,
				plRome:'',
				count: 5,
				value: '',
				goodsIdS:[]
				
			}
		},
		onLoad(option){
			this.orderIds = option.id
			this.storeName = option.name
			console.log(option,'打印option')
		},
		onShow(){
			this.getOrderDetails()
		},
		methods:{
			// getOrderDetail
			getOrderDetails(){
				this.$req('GET',this.$api.getOrderDetail,{
					order_id:this.orderIds
				}).then(res =>{
					
					this.orderDetails = res.data
					this.pay_price = res.data.pay_price
					this.address = res.data.detail
					this.name = res.data.real_name
					this.phone = res.data.phone
					this.update_time  =res.data.update_time
					this.order_no = res.data.order_no
					this.statusa = res.data.status
					this.cartsShop = this.orderDetails.goods.map(item => ({ goods_id: item.goods_id, number: item.number }));
					this.goodsIdS = this.orderDetails.goods.map(item => ({ goods_id: item.goods_id }));
					this.storePhone = res.data.store.phone
					console.log(this.goodsIdS,'查看这个玩意儿')
				})
				
			},
			backqian(){
				this.zhezhao = true
				
				
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://hwy062.qdytcy.cn/api/user/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							console.log(res.data, "888")
							setTimeout(() => {
								let data = JSON.parse(res.data);
								console.log(data.data.url, "88899")
								let imageUrl = `${data.data.url}`; // 前面可跟域名
								// imageUrl = imageUrl.replace(/\\/g, '/');
								resolve(imageUrl);
								console.log(imageUrl, "9900")
							}, 1000)
						}
					});
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					// this.image.push(result)
					this.image = result
					console.log(this.image, 'cunqilaide')
					// console.log(url,'好好好')
					
					fileListLen++
				}
				// console.log(this.fileList1,'打印kkkkk')
			},
			noMoney(){
				this.zhezhao = false
			},
			yesMoney(){
				this.$req('POST',this.$api.backMoney,{
					order_id:this.orderIds,
					user_id:uni.getStorageSync('userId'),
					re_reason:this.liyou,
					images:this.image
				}).then(res =>{
					console.log(res,'查看申请情况')
					if(res.status == 200){
						uni.$u.toast('退款申请成功')
						this.liyou = ''
						this.image = []
						setTimeout(() =>{
							this.zhezhao = false
						},1000)
					}else{
						this.liyou = ''
						this.image = []
						uni.$u.toast(res.message)
						setTimeout(() =>{
							this.zhezhao = false
						},1000)
					}
					
					
					
				})
			},
			
			buyMoney(){
				this.$req('POST',this.$api.peyMoney,{
					user_id:uni.getStorageSync('userId'),
					school_id:uni.getStorageSync('addressId'),
					cart:this.cartsShop,
					pay_type:1
				}).then(res =>{
					if(res.status == 200){
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: payRes => {
								uni.$u.toast('支付成功')
								 setTimeout(() =>{
									 uni.redirectTo({
									      url: '/pages/index/index',  // 这里的路径根据你的实际项目情况调整
									    });
								 },1000)
								 // this.getinfo()
								 
							},
							fail: err => {
								uni.$u.toast('支付失败')
							}
						});
					}
					
				})
			},
			callPhone(){
				uni.makePhoneCall({
					phoneNumber:this.storePhone
				}).catch((e) =>{
					console.log(e)
				})
			},
			noPl(){
				this.showPl = false
			},
			Pingjia(){
				this.showPl = true
			},
			yesPl(){
				// roomPl
				this.$req('POST',this.$api.roomPl,{
					user_id:uni.getStorageSync('userId'),
					detail:this.plRome,
					images:this.image,
					star:this.value,
					order_id:this.orderIds,
					goods_id:this.goodsIdS
				}).then(res =>{
					console.log(res,'查看评论的res')
					if(res.status == 200){
						uni.$u.toast('评论成功')
						this.showPl = false
					}else{
						uni.$u.toast('评论失败')
						this.showPl = false
					}
					
				})
				
				
				
			}
			
			
			
		}
		
	}
	
	
</script>

<style>
	page {
		background: #f6f5f7;
	}
	.top{
		width: 100%;
		height: 300rpx;
		background-color: #fff;
	}
	
	.wanc{
		font-size: 45rpx;
		padding: 20rpx;
		padding-left: 40rpx;
	}
	.bom{
		width: 100%;
		height: 150rpx;
		margin-top: 50rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	.bbody{
		width: 95%;
		/* height: 400rpx; */
		background-color: #fff;
		border-radius: 20rpx;
		margin: 30rpx auto;
	}
	
	.b-top{
		display: flex;
		align-items: center;
		font-size: 40rpx;
		padding: 20rpx;
	}
	
	.shops{
		padding: 20rpx;
		display: flex;
		align-items: center;
	}
	
	.shop_left{
		width: 150rpx;
	}
	
	.shop_main{
		width: 380rpx;
	}
	
	.shop_right{
		width: 150rpx;
	}
	
	.titles{
		width: 350rpx;
		height: 85rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.shifu{
		text-align: right;
		padding: 20rpx;
	}
	
	.footer{
		width: 95%;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 20rpx;
	}
	
	.neirong{
		padding: 30rpx;
		display: flex;
	}
	
	.zhePl{
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		position: absolute;
		z-index: 999;
		top: 0;
		left: 0;
	}
	
	
	
</style>